﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>多级菜单</title>
    <style>
        ul {
            font-size: 15px;
            font-family: Arial,Arial, Helvetica, sans-serif;
        }

        li {
            padding: 1px;
            margin: 0px;
        }
    </style>
    <script language="javascript" src="jquery.min.js"></script>
    <script language="javascript">
        $(function () {
            $("li:has(ul)").click(function (e) {
                if (this == e.target) {
                    if ($(this).children().is(":hidden")) {
                        //如果子项是隐藏的则显示
                        $(this).css("list-style-image", "url(minus.gif)")
                            .children().show();
                    } else {
                        //如果子项是显示的则隐藏
                        $(this).css("list-style-image", "url(plus.gif)")
                            .children().hide();
                    }
                }
                return false;	//避免不必要的事件混绕
            }).css("cursor", "pointer").click();	//加载时触发点击事件
            //对于没有子项的菜单，统一设置
            $("li:not(:has(ul))").css({
                "cursor": "default",
                "list-style-image": "none"
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>
            童装玩具
            <ul>
                <li>
                    连衣裙
                </li>
                <li>男童鞋</li>
                <li>女童鞋</li>
            </ul>
        </li>
        <li>
            孕产用品
            <ul>
                <li>
                    月子服
                    <ul>
                        <li>春季月子服</li>
                        <li>夏季月子服</li>
                        <li>冬季月子服</li>
                    </ul>
                </li>
                <li>孕妇裤</li>
                <li>月子鞋</li>
            </ul>
        </li>
        <li>奶粉辅食</li>
        <li>婴儿用车</li>
    </ul>
</body>
</html>